<template>
    <div class="item-container" @mouseleave="handelLeave" @mousemove="handelMove" ref="container">
      <div ref="image" :style="imagePosition" class="item-img">
        <image-loader @load="showWords" :src="carouselItem.bigImg"  :placeholder="carouselItem.midImg"></image-loader>
      </div>
      <div ref="title" class="title">
        {{carouselItem.title}}
      </div>
      <div  ref="desc" class="desc">
        {{carouselItem.description}}
      </div>
    </div>
</template>

<script>
import imageLoader from '@/components/ImageLoader/'
export default {
  name: 'index',
  components: {
    imageLoader
  },
  props: {
    carouselItem: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      titleWidth: 0,
      descWidth: 0,
      containerSize: null, // 外层容器尺寸
      innerSize: null, // 图片尺寸
      mouseCoordinate: { x: 0, y: 0 }
    }
  },
  computed: {
    imagePosition () {
      if (!this.containerSize || !this.innerSize) {
        return
      }
      const extraWidth = this.innerSize.width - this.containerSize.width // 多出的
      const extraWHeight = this.innerSize.height - this.containerSize.height // 多出的
      // left/this.mouseCoordinate.x = extraWidth / this.containerSize.width
      const top = (-extraWHeight / this.containerSize.height) * this.mouseCoordinate.y + 'px'
      const left = (-extraWidth / this.containerSize.width) * this.mouseCoordinate.x + 'px'
      return {
        transform: `translate(${left},${top})`
      }
    },
    center () {
      if (!this.containerSize) {
        return
      }
      return {
        x: this.containerSize.width / 2,
        y: this.containerSize.height / 2
      }
    }
  },
  async mounted () {
    this.titleWidth = this.$refs.title.clientWidth
    this.descWidth = this.$refs.desc.clientWidth
    this.showWords()
    await this.setSize()
    this.handelLeave()
    // resize窗口变化进行监听
    window.addEventListener('resize', this.setSize)
  },
  destroyed () {
    window.removeEventListener('resize', this.setSize)
  },
  methods: {
    // 显示文字
    showWords () {
      this.$refs.title.style.opacity = 1
      this.$refs.desc.style.opacity = 1
      this.$refs.title.style.width = '0px'
      this.$refs.desc.style.width = '0px'
      setTimeout(() => {
        this.$refs.title.style.width = `${this.titleWidth}px`
        this.$refs.desc.style.width = `${this.descWidth}px`
      }, 1000)
    },
    setSize () {
      // 获取尺寸
      this.containerSize = {
        width: this.$refs.container.clientWidth,
        height: this.$refs.container.clientHeight
      }
      this.innerSize = {
        width: this.$refs.image.clientWidth,
        height: this.$refs.image.clientHeight
      }
    },
    handelMove (e) {
      // 鼠标移动事件获取坐标
      const rect = this.$refs.container.getBoundingClientRect()
      this.mouseCoordinate.x = e.clientX - rect.left
      this.mouseCoordinate.y = e.clientY - rect.top
    },
    handelLeave () {
      this.mouseCoordinate.x = this.center.x
      this.mouseCoordinate.y = this.center.y
    }
  }
}
</script>

<style lang="less" scoped>
  @import "../../../styles/var";
  .item-container{
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    .item-img{
      width: 110%;
      height: 110%;
      position: absolute;
      left: 0;
      top: 0;
      transition: .3s;
    }
    .title, .desc {
      position: absolute;
      letter-spacing: 3px;
      left: 30px;
      white-space: nowrap;
      overflow: hidden;
      color: #ffffff;
      text-shadow: 1px 0px 0 rgba(0,0,0,0.5),-1px 0px 0 rgba(0,0,0,0.5),0px 1px 0 rgba(0,0,0,0.5),0px -1px 0 rgba(0,0,0,0.5);
    }
    .title {
      top:calc(70% - 30px);
      font-size: 2em;
      transition: 2s;
    }
    .desc {
      top:calc(70% + 30px);
      font-size: 1.2em;
      color: @gray;
      transition: 2s 2s;
    }
  }

</style>
